<template>
  <div id="echart"></div>
</template>

<script>
import * as echarts from "echarts";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("classes");
var myChart;
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById("echart"));
  },
  watch: {
    rows() {
      myChart.setOption(this.echartData);
    },
  },
  created() {
    this.getAll();
  },
  methods: {
    ...mapActions(["getAllClass"]),
    getAll() {
      this.getAllClass({ pageSize: 5, currentPage: 1 });
    },
  },
  computed: {
    ...mapState(["rows"]),
    echartData() {
      return {
        title: {
          text: "班级人数统计",
        },
        tooltip: {},
        xAxis: {
          data: this.rows.map(item=>item.name),
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: this.rows.map(item=>item.students.length),
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
#echart {
   width: 60%;
  height: 400px;
}
</style>